var _createClass = function () {
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
        }
    }

    return function (Constructor, protoProps, staticProps) {
        if (protoProps) defineProperties(Constructor.prototype, protoProps);
        if (staticProps) defineProperties(Constructor, staticProps);
        return Constructor;
    };
}();

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var selectSVG = function selectSVG(id) {
    var el = document.getElementById(id);
    return new SVGElement(el);
};

var createSVG = function createSVG(type) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', type);
    return new SVGElement(el);
};

var SVGElement = function () {
    function SVGElement(element) {
        _classCallCheck(this, SVGElement);

        this.element = element;
    }

    _createClass(SVGElement, [{
        key: 'set',
        value: function set(attributeName, value) {
            // this.element.setAttribute(attributeName, value);
        }
    }, {
        key: 'style',
        value: function style(property, value) {
            this.element.style[property] = value;
        }
    }]);

    return SVGElement;
}();

var colors = [{
    main: '#FBDB4A',
    shades: ['#FAE073', '#FCE790', '#FADD65', '#E4C650']
}, {
    main: '#F3934A',
    shades: ['#F7B989', '#F9CDAA', '#DD8644', '#F39C59']
}, {
    main: '#EB547D',
    shades: ['#EE7293', '#F191AB', '#D64D72', '#C04567']
}, {
    main: '#9F6AA7',
    shades: ['#B084B6', '#C19FC7', '#916198', '#82588A']
}, {
    main: '#5476B3',
    shades: ['#6382B9', '#829BC7', '#4D6CA3', '#3E5782']
}, {
    main: '#2BB19B',
    shades: ['#4DBFAD', '#73CDBF', '#27A18D', '#1F8171']
}, {
    main: '#70B984',
    shades: ['#7FBE90', '#98CBA6', '#68A87A', '#5E976E']
}];
var svg = selectSVG('svg');
var text = document.getElementById('text');
var offscreenText = document.getElementById('offscreen-text');
var input = document.getElementById('input');
var button = document.getElementById('button');
var width = window.innerWidth;
var height = window.innerHeight;
var textSize = 0;
var textCenter = 0;
var letters = [];
var prompt = ['s', 't', 'a', 'r', 't', ' ', 't', 'y', 'p', 'i', 'n', 'g'];
var runPrompt = false;

var resizePage = function resizePage() {
    width = window.innerWidth;
    height = window.innerHeight;
    svg.set('height', height);
    svg.set('width', width);
    svg.set('viewBox', '0 0 ' + width + ' ' + height);
    resizeLetters();
};

var resizeLetters = function resizeLetters() {
    textSize = width / (letters.length + 2);
    if (textSize > 100) textSize = 100;
    //text.style.fontSize = textSize + 'px';
    //text.style.height = textSize + 'px';
    //text.style.lineHeight = textSize + 'px';
    offscreenText.style.fontSize = textSize + 'px';
    //var textRect = text.getBoundingClientRect();
    //textCenter = textRect.top + textRect.height / 2;
    positionLetters();
};

var positionLetters = function positionLetters() {
    letters.forEach(function (letter) {
        var timing = letter.shift ? 0.1 : 0;
        TweenLite.to(letter.onScreen, timing, {
            x: letter.offScreen.offsetLeft + 'px',
            ease: Power3.easeInOut
        });
        letter.shift = true;
    });
};

var animateLetterIn = function animateLetterIn(letter) {
    var yOffset = (0.5 + Math.random() * 0.5) * textSize;
    TweenLite.fromTo(letter, 0.4, {
        scale: 0
    }, {
        scale: 1,
        ease: Back.easeOut
    });
    TweenLite.fromTo(letter, 0.4, {
        opacity: 0
    }, {
        opacity: 1,
        ease: Power3.easeOut
    });
    TweenLite.to(letter, 0.2, {
        y: -yOffset,
        ease: Power3.easeInOut
    });
    TweenLite.to(letter, 0.2, {
        y: 0,
        ease: Power3.easeInOut,
        delay: 0.2
    });
    var rotation = -50 + Math.random() * 100;
    TweenLite.to(letter, 0.2, {
        rotation: rotation,
        ease: Power3.easeInOut
    });
    TweenLite.to(letter, 0.2, {
        rotation: 0,
        ease: Power3.easeInOut,
        delay: 0.2
    });
};

var addDecor = function addDecor(letter, color) {
    setTimeout(function () {
        var rect = letter.getBoundingClientRect();
        var x0 = letter.offsetLeft + letter.offsetWidth / 2;
        var y0 = textCenter - textSize * 0.5;
        var shade = color.shades[Math.floor(Math.random() * 4)];
        for (var i = 0; i < 8; i++) {
            addTri(x0, y0, shade);
        }
        for (var i = 0; i < 8; i++) {
            addCirc(x0, y0);
        }
    }, 150);
};

var addTri = function addTri(x0, y0, shade) {
    var tri = createSVG('polygon');
    var a = Math.random();
    var a2 = a + (-0.2 + Math.random() * 0.4);
    var r = textSize * 0.52;
    var r2 = r + textSize * Math.random() * 0.2;
    var x = x0 + r * Math.cos(2 * Math.PI * a);
    var y = y0 + r * Math.sin(2 * Math.PI * a);
    var x2 = x0 + r2 * Math.cos(2 * Math.PI * a2);
    var y2 = y0 + r2 * Math.sin(2 * Math.PI * a2);
    var triSize = textSize * 0.1;
    var scale = 0.3 + Math.random() * 0.7;
    var offset = triSize * scale;
    tri.set('points', '0,0 ' + triSize * 2 + ',0 ' + triSize + ',' + triSize * 2);
    tri.style('fill', shade);
    //svg.element.appendChild(tri.element);
    TweenLite.fromTo(tri.element, 0.6, {
        rotation: Math.random() * 360,
        scale: scale,
        x: x - offset,
        y: y - offset,
        opacity: 1
    }, {
        x: x2 - offset,
        y: y2 - offset,
        opacity: 0,
        ease: Power1.easeInOut,
        onComplete: function onComplete() {
            //svg.element.removeChild(tri.element);
        }
    });
};

var addCirc = function addCirc(x0, y0) {
    var circ = createSVG('circle');
    var a = Math.random();
    var r = textSize * 0.52;
    var r2 = r + textSize;
    var x = x0 + r * Math.cos(2 * Math.PI * a);
    var y = y0 + r * Math.sin(2 * Math.PI * a);
    var x2 = x0 + r2 * Math.cos(2 * Math.PI * a);
    var y2 = y0 + r2 * Math.sin(2 * Math.PI * a);
    var circSize = textSize * 0.05 * Math.random();
    circ.set('r', circSize);
    circ.style('fill', '#eee');
    //svg.element.appendChild(circ.element);
    TweenLite.fromTo(circ.element, 0.6, {
        x: x - circSize,
        y: y - circSize,
        opacity: 1
    }, {
        x: x2 - circSize,
        y: y2 - circSize,
        opacity: 0,
        ease: Power1.easeInOut,
        onComplete: function onComplete() {
            //svg.element.removeChild(circ.element);
        }
    });
};

var addLetter = function addLetter(char, i) {
    var letter = document.createElement('span');
    var oLetter = document.createElement('span');
    letter.innerHTML = char;
    oLetter.innerHTML = char;
    //text.appendChild(letter);
    var color = colors[i % colors.length];
    letter.style.color = color.main;
    offscreenText.appendChild(oLetter);
    letters[i] = {
        offScreen: oLetter,
        onScreen: letter,
        char: char
    };
    animateLetterIn(letter);
    addDecor(oLetter, color);
};

var addLetters = function addLetters(value) {
    value.forEach(function (char, i) {
        if (letters[i] && letters[i].char !== char) {
            letters[i].onScreen.innerHTML = char;
            letters[i].offScreen.innerHTML = char;
            letters[i].char = char;
        }
        if (letters[i] === undefined) {
            addLetter(char, i);
        }
    });
};

var animateLetterOut = function animateLetterOut(letter, i) {
    TweenLite.to(letter.onScreen, 0.1, {
        scale: 0,
        opacity: 0,
        ease: Power2.easeIn,
        onComplete: function onComplete() {
            console.log('removing');
            console.log(letter);
            offscreenText.removeChild(letter.offScreen);
            // text.removeChild(letter.onScreen);
            positionLetters();
        }
    });
    letters.splice(i, 1);
};

var removeLetters = function removeLetters(value) {
    for (var i = letters.length - 1; i >= 0; i--) {
        var letter = letters[i];
        if (value[i] === undefined) {
            animateLetterOut(letter, i);
        }
    }
};

var onInputChange = function onInputChange() {
    var value = input.value === '' ? [] : input.value.toLowerCase().split('');
    addLetters(value);
    removeLetters(value);
    resizeLetters();
};

var keyup = function keyup(e) {
    if (runPrompt) {
        input.value = '';
        runPrompt = false;
    }
    ;
    onInputChange();
};

var addPrompt = function addPrompt(i) {
    setTimeout(function () {
        if (runPrompt && prompt[i]) {
            input.value = input.value + prompt[i];
            onInputChange();
            addPrompt(i + 1);
        }
    }, 300);
};

resizePage();
window.addEventListener('resize', resizePage);
input.addEventListener('keyup', keyup);
input.focus();
addPrompt(0);
//页面加载事件
$(function () {
    //选择文件
    let btn = $("#buttonSelectFile")
    btn.on("click", function () {
        if ($(":file").val() == null || $(":file").val() == "") {
            $(":file").click().on("change", function (e) {
                if ($(this).val() != null) {
                    console.log($(this).val());
                    $("#input").val($(this).val());
                    btn.text("开始上传")
                }
            })
        } else {
            if ($(":file") == null) {
                alert("请重新选择文件");
                return;
            }
            //开始上传
            $(".progress").removeClass("d-none");
            $(".file").addClass("d-none");
            let file = $(":file")[0].files[0];
            upload(file)
        }

    });
    //文件名称框为空的时候，清除input type=file里面的文件
    $("#input").on("input", function () {
        if ($(this).val() == null || $(this).val() == "") {
            $(":file").val("");
            btn.text("选择文件");
        }
    });
    //上传完毕弹出的提示框关闭事件
    $("#btnOk").on("click", function () {
        $(".messageShow").addClass("d-none");
        $(".file").removeClass("d-none");
        initData();
    })

    //5#f63a0f 25#f27011 50#f2b01e 75#f2d31b 100#86e01e
    async function setUI(width) {
        if (width < 25) {
            $("#progressBar").removeClass("color100");
            $("#progressBar").addClass("color5");
        } else if (width < 50) {
            $("#progressBar").removeClass("color5");
            $("#progressBar").addClass("color25");
        } else if (width < 75) {
            $("#progressBar").removeClass("color25");
            $("#progressBar").addClass("color50");
        } else if (width < 95) {
            $("#progressBar").removeClass("color50");
            $("#progressBar").addClass("color75");
        } else if (width >= 95) {
            $("#progressBar").removeClass("color75");
            $("#progressBar").addClass("color100");
        }

        if (width <= 100) {
            $("#progressBar").css("width", width + "%");
            $("#progressValue").text(width + '%');
        }


    }

    function uploadFinish() {
        $(".messageShow").removeClass("d-none");
        $(".progress").addClass("d-none");
        $("#progressBar").removeClass("color100");
    }

    async function upload(file) {
        uploadFile(file, 0);
    }

    //初始化所有数据
    function initData() {
        $(":file").val("");
        $("#input").val("");
        btn.text("选择文件");
        $("#progressBar").css("width", "0%");
        $("#progressValue").text('0%');
    }

    async function uploadFile(file, skip) {
        // return new Promise()
        var formData = new FormData(); //初始化一个FormData对象
        var blockSize = 1024 * 1024; //每块的大小=1Mb
        var nextSize = Math.min((skip + 1) * blockSize, file.size); //读取到结束位置
        var fileData = file.slice(skip * blockSize, nextSize); //截取 部分文件 块
        let count = file.size / blockSize;//总分块数
        formData.append("file", fileData); //将 部分文件 塞入FormData
        formData.append("fileName", file.name); //保存文件名字
        formData.append("count", count);
        formData.append("index", skip);//当前上传片的下标
        $.ajax({
            url: "/file/upload",
            type: "POST",
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (responseText) {
                console.log("已经上传了" + (skip + 1) + "块文件");


                let value = (100 / count) * skip;//已经上传的百分比
                value = value.toFixed(2);
                setUI(value);//修改界面百分比
                if (file.size <= nextSize) { //如果上传完成，则跳出继续上传
                    console.log("上传完成");
                    uploadFinish();

                    return;
                }
                uploadFile(file, ++skip); //递归调用
            }
        });

    };

    // var file = $("#file6")[0].files[0];

    // upload(file, 0);

})
// function search(){
// 	window.open("http://www.baidu.com/s?wd="+$("#input").val());
// }
// document.onkeydown = function(event) {
// var e = event || window.event || arguments.callee.caller.arguments[0];
//     if (e && e.keyCode == 13) { 
// 		search();
//        }
//    };
